<html>

<head>
  <link rel="stylesheet" href="//codepen.io/CodePenTemplates/pen/GNoNGy.css" />
  <link rel="stylesheet" href="//codepen.io/CodePenTemplates/pen/XNXpgM.css" />
</head>

<body>
  <section class="markdown-body">
    <p><a href="https://html5boilerplate.com">HTML5 Boilerplate homepage</a> | <a href="TOC.md">Documentation
table of contents</a></p>
    <h1 id="usage">Usage</h1>
    <p>Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app usually involves the following:</p>
    <ol>
      <li>Set up the basic structure of the site.</li>
      <li>Add some content, style, and functionality.</li>
      <li>Run your site locally to see how it looks.</li>
      <li>(Optionally run a build script to automate the optimization of your site - e.g. <a href="https://github.com/h5bp/ant-build-script">ant build script</a>)</li>
      <li>Deploy your site.</li>
    </ol>
    <h2 id="basic-structure">Basic structure</h2>
    <p>A basic HTML5 Boilerplate site initially looks something like this:</p>
    <pre><code>.
├── <span class="hljs-selector-tag">css</span>
│   ├── <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.css</span>
│   └── <span class="hljs-selector-tag">normalize</span><span class="hljs-selector-class">.css</span>
├── <span class="hljs-selector-tag">doc</span>
├── <span class="hljs-selector-tag">img</span>
├── <span class="hljs-selector-tag">js</span>
│   ├── <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span>
│   ├── <span class="hljs-selector-tag">plugins</span><span class="hljs-selector-class">.js</span>
│   └── <span class="hljs-selector-tag">vendor</span>
│       ├── <span class="hljs-selector-tag">jquery</span><span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.js</span>
│       └── <span class="hljs-selector-tag">modernizr</span><span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.js</span>
├── <span class="hljs-selector-class">.editorconfig</span>
├── <span class="hljs-selector-class">.htaccess</span>
├── 404<span class="hljs-selector-class">.html</span>
├── <span class="hljs-selector-tag">apple-touch-icon</span><span class="hljs-selector-class">.png</span>
├── <span class="hljs-selector-tag">browserconfig</span><span class="hljs-selector-class">.xml</span>
├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.html</span>
├── <span class="hljs-selector-tag">humans</span><span class="hljs-selector-class">.txt</span>
├── <span class="hljs-selector-tag">robots</span><span class="hljs-selector-class">.txt</span>
├── <span class="hljs-selector-tag">crossdomain</span><span class="hljs-selector-class">.xml</span>
├── <span class="hljs-selector-tag">favicon</span><span class="hljs-selector-class">.ico</span>
├── <span class="hljs-selector-tag">tile-wide</span><span class="hljs-selector-class">.png</span>
└── <span class="hljs-selector-tag">tile</span><span class="hljs-selector-class">.png</span>
</code></pre>
    <p>What follows is a general overview of each major part and how to use them.</p>
    <h3 id="css">css</h3>
    <p>This directory should contain all your project&#39;s CSS files. It includes some initial CSS to help get you started from a solid foundation. <a href="css.md">About the
CSS</a>.</p>
    <h3 id="doc">doc</h3>
    <p>This directory contains all the HTML5 Boilerplate documentation. You can use it as the location and basis for your own project&#39;s documentation.</p>
    <h3 id="js">js</h3>
    <p>This directory should contain all your project&#39;s JS files. Libraries, plugins, and custom code can all be included here. It includes some initial JS to help get you started. <a href="js.md">About the JavaScript</a>.</p>
    <h3 id="-htaccess">.htaccess</h3>
    <p>The default web server configs are for Apache. For more information, please refer to the <a href="https://github.com/h5bp/server-configs-apache">Apache Server Configs
repository</a>.</p>
    <p>Host your site on a server other than Apache? You&#39;re likely to find the corresponding server configs project listed in our <a href="https://github.com/h5bp/server-configs/blob/master/README.md">Server Configs
</a> repository.</p>
    <h3 id="404-html">404.html</h3>
    <p>A helpful custom 404 to get you started.</p>
    <h3 id="browserconfig-xml">browserconfig.xml</h3>
    <p>This file contains all settings regarding custom tiles for IE11.</p>
    <p>For more info on this topic, please refer to
      <a href="https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx">MSDN</a>.</p>
    <h3 id="-editorconfig">.editorconfig</h3>
    <p>The <code>.editorconfig</code> file is provided in order to encourage and help you and your team to maintain consistent coding styles between different editors and IDEs. <a href="misc.md#editorconfig">Read more about the <code>.editorconfig</code> file</a>.</p>
    <h3 id="index-html">index.html</h3>
    <p>This is the default HTML skeleton that should form the basis of all pages on your site. If you are using a server-side templating framework, then you will need to integrate this starting HTML with your setup.</p>
    <p>Make sure that you update the URLs for the referenced CSS and JavaScript if you modify the directory structure at all.</p>
    <p>If you are using Google Universal Analytics, make sure that you edit the corresponding snippet at the bottom to include your analytics ID.</p>
    <h3 id="humans-txt">humans.txt</h3>
    <p>Edit this file to include the team that worked on your site/app, and the technology powering it.</p>
    <h3 id="robots-txt">robots.txt</h3>
    <p>Edit this file to include any pages you need hidden from search engines.</p>
    <h3 id="crossdomain-xml">crossdomain.xml</h3>
    <p>A template for working with cross-domain requests. <a href="misc.md#crossdomainxml">About
crossdomain.xml</a>.</p>
    <h3 id="icons">Icons</h3>
    <p>Replace the default <code>favicon.ico</code>, <code>tile.png</code>, <code>tile-wide.png</code> and Apple Touch Icon with your own.</p>
    <p>If you want to use different Apple Touch Icons for different resolutions please refer to the <a href="extend.md#apple-touch-icons">according documentation</a>.</p>
    <p>You might want to check out Hans&#39; handy <a href="https://drublic.de/blog/html5-boilerplate-favicons-psd-template/">HTML5 Boilerplate Favicon and Apple
Touch Icon
PSD-Template</a>.</p>

  </section>
</body>

</html>